<template>
  <div id="app">
	 
	 
	 <div class="item menu"> 

			<ul>
				<li><a href="" @click.prevent="selected =1 " >用户管理</a> </li>
				<li><a href="" @click.prevent="selected =2 " >角色管理</a> </li>
			</ul>
	  
	  </div>
	 <div class="item content">
		 
		 <User v-if="selected == 1"></User>
		 <Role  v-else-if="selected == 2"></Role>
		 
		 
	 </div>
	 
	 
	 
	 
	 
	 
	 
  </div>
</template>

<script>

 import User from './views/User.vue';
 import Role from './views/Role.vue';
	

export default {
  name: 'App',
  data(){
	  return {
		  selected:2
	  }
  },
  //局部组件
  components:{
	 User,
	 Role
  }

 }
</script>

<style scoped>
  #app{
	  margin: 10px;
  }
  .item{
	  vertical-align: top;
	  display: inline-block;
	  height: 100vh;
	  border:dashed 1px grey;
  }
  
  .menu{
	  width: 200px;
  }
  
  .content{
	  width: 1000px;
  }

</style>
